import { useEffect, useState } from 'react';
import { Button, Tooltip } from 'antd';
import IconFont from '@/assets/iconfont';

export const AxButton = props => {
  const { children, className: classNameFromProps, ...rest } = props;
  let className = 'ant-btn-two-chinese-chars';
  if (classNameFromProps === 'ax-no-class') {
    className = undefined;
  } else if (classNameFromProps) {
    className += ' ' + classNameFromProps;
  }

  return (
    <Button type="primary" className={className} {...rest}>
      {children}
    </Button>
  );
};

/**
 * 提交按钮
 * @param form 表单
 * @param flag 标记（默认值ok [ok - 保存  continue - 保存并继续]）
 * @param tip 提示信息
 * @param confirmLoading 提交状态
 * @param handleClick 点击事件处理函数
 */
export const AxButtonOk = props => {
  const {
    children,
    form,
    flag = 'ok',
    handleClick: handleClickFromProps,
    tip,
    confirmLoading: confirmLoadingFromProps,
    ...rest
  } = props;
  const [confirmLoading, setConfirmLoading] = useState(false);

  useEffect(() => {
    setConfirmLoading(confirmLoadingFromProps);
  }, [confirmLoadingFromProps]);
  const handleClick = () => {
    if (handleClickFromProps) {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        setConfirmLoading(true);

        /** 处理提交的时间格式 */
        for (let p in fieldsValue) {
          if (p.toLowerCase().indexOf('time') > -1 || p.toLowerCase().indexOf('date') > -1) {
            const v = fieldsValue[p];
            if (v && v.length === 2 && v[0].format && v[1].format) {
              fieldsValue[p] = v[0].format(v._f) + '~' + v[1].format(v._f);
              fieldsValue[p + 'Start'] = v[0].format(v._f);
              fieldsValue[p + 'End'] = v[1].format(v._f);
            } else if (v && v.format && v._f) {
              fieldsValue[p] = v.format(v._f);
            }
          }
        }

        handleClickFromProps(fieldsValue)
          .then(
            () => {
              switch (flag) {
                case 'ok':
                  break;
                case 'continue':
                  setConfirmLoading(false);
                  form.resetFields();
                  break;
                case 'repeat':
                  setConfirmLoading(false);
                  break;
              }
            },
            () => {
              setConfirmLoading(false);
            },
          )
          .catch(() => {
            setConfirmLoading(false);
          });
      });
    }
  };

  return (
    <Tooltip title={tip}>
      <AxButton
        type="primary"
        icon="save"
        onClick={() => handleClick()}
        loading={confirmLoading}
        {...rest}
      >
        {children}
      </AxButton>
    </Tooltip>
  );
};

/**
 *
 * @param axback 是否调用history.back()
 */
export const AxButtonCancel = props => {
  const { children, handleClick: handleClickFromProps, axback = false, ...rest } = props;

  const handleClick = () => {
    (axback && history.back()) || (handleClickFromProps && handleClickFromProps());
  };

  return (
    <AxButton type="undefined" className="ax-no-class" onClick={handleClick} {...rest}>
      <IconFont type="iconquxiao" />
      {children}
    </AxButton>
  );
};
